<template>
	<div class="login-bg w-full h-screen flex justify-center items-center">
		<n-card class="w-96 animate__animated animate__jackInTheBox card-shadow">
			<div class="px-5">
				<div class="mb-2 text-right">
					<n-gradient-text :size="24">
						Login
					</n-gradient-text>
					<n-progress
						type="line"
						:percentage="formProgress"
						processing
						:show-indicator="false"
						status="success"
						:height="2"
						:border-radius="0"
						:fill-border-radius="0"
						class="mt-2"
						:color="theme.primaryColor"
					/>
				</div>
				<div class="p-3 mt-5">
					<n-form ref="formRef"
					        :label-width="80"
					        :model="formValue"
					        :rules="rules"
					        :size="size">
						<n-form-item label="用户名" path="username">
							<n-input v-model:value="formValue.username" placeholder="请输入用户名" />
						</n-form-item>
						<n-form-item label="密码" path="password">
							<n-input v-model:value="formValue.password"
							         placeholder="请输入密码"
							         type="password"
							         :input-props="{ autocomplete: 'off' }"
							         show-password-on="mousedown" />
						</n-form-item>
						<div class="py-3">
							<n-spin size="small" :show="loginBtnLoading">
								<n-button strong
								          type="primary"
								          @click="doLogin"
								          class="w-full">
									登 录
								</n-button>
							</n-spin>
						</div>
					</n-form>
				</div>
			</div>
		</n-card>
	</div>
</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref, watch} from "vue"
import {FormInst, useMessage, useThemeVars} from "naive-ui"
import {useRouter} from "vue-router"
import {login} from "@/api/api"
import {setMenuInfo, setToken, setUserInfo} from "@/utils/common"
import {useStore} from "vuex"

const store = useStore()
const theme = useThemeVars()

const router = useRouter()
const formRef = ref<FormInst | null>(null)
const size = ref("medium")
const message = useMessage()
const loginBtnLoading = ref(false)

// 表单填写进度
const formProgress = ref(0)

const formValue = ref({
	username: "",
	password: "",
})

watch(() => formValue, (newValue) => {
	formProgress.value = 0
	if (newValue.value.username) {
		formProgress.value += 50
	}
	if (newValue.value.password) {
		formProgress.value += 50
	}
}, {deep: true})

const rules = {
	username: {
		required: true,
		message: "请输入用户名",
		trigger: ["input", "blur"],
	},
	password: {
		required: true,
		message: "请输入密码",
		trigger: ["input", "blur"],
	},
}
const doLogin = () => {
	formRef.value?.validate((errors) => {
		if (!errors) {
			loginBtnLoading.value = true
			// 表单校验通过
			login(formValue.value).then((res: any) => {
				if (res.code == 200) {
					setToken(res.data.token)
					setUserInfo(res.data.userInfo)
					setMenuInfo(res.data.role)
					
					store.dispatch("initMenu", res.data.role).then(() => {
						message.success(res.message)
						router.push("/")
					})
				} else {
					message.error(res.message)
				}
				
				loginBtnLoading.value = false
			}).catch((err) => {
				loginBtnLoading.value = false
				message.error(err.data.msg)
			})
		}
	})
}

onMounted(() => {
	window.addEventListener("keydown", keyDown)
})

const keyDown = (e: any) => {
	//如果是回车则执行登录方法
	if (e.keyCode == 13) {
		doLogin()
	}
}

onUnmounted(() => {
	window.removeEventListener("keydown", keyDown, false)
})

</script>

<style lang="scss" scoped>
.login-bg {
	background-image: linear-gradient(-225deg, #FFFEFF 0%, v-bind('theme.primaryColor') 260%);
}
</style>
